<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PCR 渠道服工具箱</title>
    <link rel="shortcut icon" type="image/x-icon" href="/static/128431.ico" />
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <nav class="navbar">
            <div class="container navbar-container"
                style="margin: 0 auto; max-width: 1200px; display: grid; grid-template-columns: auto 1fr; align-items: center;">
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <a class="navbar-brand" href="/" style="margin-right: 0;">
                        <img src="/static/128431.ico" alt="Logo" style="height: 30px;">
                        PCR 渠道服工具箱
                    </a>
                </div>

                <div class="navbar-menu" style="justify-content: flex-end; padding-left: 0; gap: 2rem; display: flex;">
                    <a class="navbar-item" :class="{ active: state.is_current }" @click="changeToCurrent">
                        当期会战
                    </a>
                    <a class="navbar-item" :class="{ active: state.is_history }" @click="changeToHistory">
                        历史会战
                    </a>
                    <a class="navbar-item" href="/arena">
                        分场查询
                    </a>
                    <button class="theme-toggle" @click="toggleTheme" title="切换主题">
                        {{ state.isDarkMode ? '🌙' : '☀️' }}
                    </button>
                </div>
            </div>
        </nav>

        <div class="container fade-in">
            <div class="card">
                <div class="grid-compact"
                    style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: center; gap: 1rem;">
                    <!-- Current Mode: Date and Time -->
                    <template v-if="state.is_current">
                        <div class="form-group" style="margin-bottom: 0;">
                            <select class="form-control" v-model="state.selectedDate">
                                <option v-for="(val, key) in state.TimeData" :value="key">{{ parseDate(key) }}</option>
                            </select>
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <select class="form-control" v-model="state.selectedTime">
                                <option v-for="val in state.TimeData[state.selectedDate]" :value="val">{{ parseTime(val)
                                    }}</option>
                            </select>
                        </div>
                    </template>

                    <!-- History Mode: Month -->
                    <template v-else>
                        <div class="form-group" style="margin-bottom: 0; grid-column: span 2;">
                            <select class="form-control" v-model="state.selectedHistory">
                                <option v-for="val in state.historyData[state.selectedServer]" :value="val">{{ val }}
                                </option>
                            </select>
                        </div>
                    </template>

                    <!-- Search Input -->
                    <div class="form-group" style="margin-bottom: 0; flex-grow: 2;">
                        <input type="text" class="form-control" placeholder="请输入公会名" v-model="state.searchContents">
                    </div>

                    <!-- Buttons -->
                    <div class="form-group" style="display: flex; gap: 0.5rem; margin-bottom: 0;">
                        <button class="btn" @click="searchDataFirstTime" :disabled="state.loading">
                            查询
                        </button>
                        <button class="btn btn-secondary" @click="searchScoreLine" :disabled="state.loading">
                            查档线
                        </button>
                    </div>
                </div>
            </div>

            <div class="card" v-if="state.showData.length > 0">
                <div style="overflow-x: auto;">
                    <table>
                        <thead>
                            <tr>
                                <th>排名</th>
                                <th>公会名</th>
                                <th>分数</th>
                                <th>人数</th>
                                <th>会长名</th>
                                <th>参考周目</th>
                                <th>上期</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(val, key) in state.showData" :key="key">
                                <td>{{ val.rank }}</td>
                                <td>{{ val.clan_name }}</td>
                                <td>{{ val.damage }}</td>
                                <td>{{ val.member_num }}</td>
                                <td>{{ val.leader_name }}</td>
                                <td>{{ val.lap }}</td>
                                <td>{{ val.grade_rank }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="pagination">
                    <button class="btn btn-secondary" @click="addPage(-1)" :disabled="state.pageinfo.prevDisabled">
                        上一页
                    </button>
                    <span style="align-self: center;">
                        {{ state.pageinfo.page + 1 }} / {{ state.pageinfo.maxPage }}
                    </span>
                    <button class="btn btn-secondary" @click="addPage(1)" :disabled="state.pageinfo.nextDisabled">
                        下一页
                    </button>
                </div>
            </div>

            <div v-if="state.errorOccured" class="card"
                style="background: rgba(255, 0, 0, 0.2); border-color: rgba(255, 0, 0, 0.5);">
                {{ state.errorMsg }}
            </div>
        </div>
    </div>
    <script src="/static/js/main.js"></script>
</body>

</html>